import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class SelContentModel{
    String title;
    List selectVL;      //选项的value和label值
    Function callback;
    SelContentModel({this.title,this.selectVL,this.callback});
}

class SelTemp extends StatefulWidget{
    SelTemp({this.content,this.callback,this.selValList});

    final List<SelContentModel> content;    //筛选的模板
    List selValList;                        //选中的值的数组
    final Function callback;                //点击确定按钮的回调（回传选中的数组到上一页）

    @override
    _SelTempState createState() => _SelTempState();
}

class _SelTempState extends State<SelTemp>{

    List selVal = [];

    @override
    void initState() {
        selVal = widget.selValList;
        
        super.initState();
    }

    @override
    Widget build(BuildContext context){
        return Container(
            height: double.infinity,
            width: double.infinity,
            decoration: BoxDecoration(
                color: Colors.white
            ),
            child: Scaffold(
                appBar: AppBar(
                    title: Text("筛选",style: TextStyle(color: Colors.black),),
                    leading: IconButton(
                        icon: Icon(Icons.close,color: Colors.black,),
                        onPressed: (){Navigator.pop(context);},
                    ),
                    backgroundColor:Colors.white,
                    bottomOpacity:0,
                    elevation: 0,
                ),
                body: Container(
                    color: Colors.white,
                    child: Column(
                        children: <Widget>[
                            Expanded(
                                child: Container(
                                    padding: EdgeInsets.fromLTRB(20.0,0,20.0,20.0),
                                    child: ListView.builder(
                                        itemCount: widget.content.length,
                                        itemBuilder: (BuildContext context, int index){
                                            return Column(
                                                crossAxisAlignment:CrossAxisAlignment.start,
                                                children: <Widget>[
                                                    Container(
                                                        margin: EdgeInsets.fromLTRB(0,15,0,15),
                                                        child: Text(
                                                            widget.content[index].title,
                                                            style: TextStyle(
                                                                fontSize: 20
                                                            ),
                                                        ),
                                                    ),
                                                    Wrap(
                                                        alignment: WrapAlignment.start,
                                                        verticalDirection: VerticalDirection.down,
                                                        spacing: 10,
                                                        runSpacing: 10,
                                                        children: List.generate(widget.content[index].selectVL.length, (i){
                                                            return GestureDetector(
                                                                onTap: (){
                                                                    setState(() {
                                                                        selVal[index] = widget.content[index].selectVL[i]["value"];
                                                                    });
                                                                    widget.content[index].callback(selVal[index]);
                                                                },
                                                                child: Container(
                                                                    width: (MediaQuery.of(context).size.width-60)/3,
                                                                    height: 40.0,
                                                                    alignment: Alignment.center,
                                                                    decoration: BoxDecoration(
                                                                        borderRadius: BorderRadius.circular(5),
                                                                        border:widget.content[index].selectVL[i]["value"] == selVal[index]? Border.all(color: Colors.blue, width: 1.0):null,
                                                                        color: widget.content[index].selectVL[i]["value"] == selVal[index]? Colors.white:Colors.grey[100],
                                                                    ),
                                                                    child: Text(
                                                                        widget.content[index].selectVL[i]["label"].toString(),
                                                                        style: TextStyle(
                                                                            color: widget.content[index].selectVL[i]["value"] == selVal[index]? Colors.blue:Colors.black,
                                                                        ),
                                                                    ),
                                                                )
                                                            );
                                                        }),
                                                    )
                                                ],
                                            );
                                        },
                                    ),
                                )
                            ),
                            Container(
                                width: double.infinity,
                                // height: 70,
                                child: Row(
                                    children: <Widget>[
                                        Container(
                                            padding: EdgeInsets.fromLTRB(10.0,10.0,0,10.0),
                                            height: 70,
                                            width: ScreenUtil().setWidth(230),
                                            child: FlatButton(
                                                color: Colors.grey[200],
                                                shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
                                                child: Text(
                                                    "取消",
                                                    style: TextStyle(color: Colors.white),
                                                ),
                                                onPressed: (){Navigator.pop(context);},
                                            ),
                                        ),
                                        Expanded(
                                            child: Container(
                                                padding: EdgeInsets.all(10.0),
                                                height: 70,
                                                child: FlatButton(
                                                    color: Color.fromRGBO(81, 126, 219, 1),
                                                    shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
                                                    child: Text(
                                                        "确定",
                                                        style: TextStyle(color: Colors.white),
                                                    ),
                                                    onPressed: (){
                                                        widget.callback(selVal);
                                                        Navigator.pop(context);
                                                    },
                                                ),
                                            ),
                                        )
                                    ],
                                )
                            ),
                        ],
                    ),
                )
            ),
        );
    }
}


           